<script type="text/x-template" id="form-map">
    <lay-form-item label="地图类型" prop="map_type">
        <lay-radio v-model="formData.map_type" name="map_type" label="normal">默认地图</lay-radio>
        <lay-radio v-model="formData.map_type" name="map_type" label="earth">卫星地图</lay-radio>
    </lay-form-item>
    <lay-form-item label="地图高度" prop="height">
        <lay-input v-model="formData.height" label="需带单位px"></lay-input>
    </lay-form-item>
    <lay-form-item label="缩放等级" prop="zoom">
        <lay-input v-model="formData.zoom"></lay-input>
    </lay-form-item>
    <lay-form-item label="旋转角度" prop="rotate">
        <lay-input v-model="formData.rotate"></lay-input>
    </lay-form-item>
    <lay-form-item label="中心坐标" prop="center">
        <me-point-select v-model="formData.center" :zoom="formData.zoom" :map-type="formData.map_type" :rotate="formData.rotate"></me-point-select>
    </lay-form-item>
    <div style="margin-bottom: 20px; border-top: 3px dotted #888;"></div>
    <template v-for="(item, index) in formData.list" :key="index">
        <me-point :data="item" :center="formData.center" :zoom="formData.zoom" :map-type="formData.map_type" :rotate="formData.rotate"></me-point>
        <lay-form-item label="添加删除">
            <lay-button border="green" @click="pointsAdd(index)">插入一组坐标</lay-button>
            <lay-button border="orange" @click="pointsDel(index)">删除本组坐标</lay-button>
        </lay-form-item>
        <div style="margin-bottom: 20px; border-top: 3px dotted #888;"></div>
    </template>
    <template v-if="formData.list.length == 0">
        <lay-form-item label="添加删除">
            <lay-button border="green" @click="pointsAdd(0)">插入一组坐标</lay-button>
        </lay-form-item>
        <div style="margin-bottom: 20px; border-top: 3px dotted #888;"></div>
    </template>
</script>
<script>
    components['form-map'] = defineComponent({
        template: '#form-map',
        props: {
            modelValue: {
                type: Object,
                default: {}
            }
        },
        setup(props, ctx) {
            const formData = reactive(props.modelValue);

            const pointsAdd = index => {
                formData.list.splice(index + 1, 0, {points: [''], point_type: 'point', line_color: '#5FB878', fill_color: '#5FB87820', text_color: '#F50505'});
            }

            const pointsDel = index => {
                const id = layer.confirm('确定删除本组坐标？', {icon: 3, title:'提示', yes() {
                    layer.close(id);
                    formData.list.splice(index , 1);
                }});
            }

            onMounted(() => {
                console.log('form-map mounted');
            });

            return {
                formData,
                pointsAdd,
                pointsDel
            }
        },
        inheritAttrs: false
    });
</script>